<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        *{
            padding: 0;
            margin: 0;
            list-style: none;
        }
        a{
            text-decoration: none;
        }
        .damihead{
            width: 100%;
            height: 40px;
            /* border: 1px solid red; */
            background-color: #333333;
            display: flex;
            justify-content: space-between;
            padding-left: 150px;
            box-sizing: border-box;
        }
        .damihead-left{
            width: 600px;
            height: 100%;
            /* border: 1px solid red; */

        }
        .damihead-left ul{
            height: 100%;
            display: flex;
            justify-content: space-between;
            align-items: center;
            /* border: 1px solid red; */
            font-size: 12px;
            color: #fff;



        }
        .damihead-right{
            width: 250px;
            height: 100%;
            /* border: 1px solid red; */
            display: flex;
            justify-content: space-between;
            margin-right: 30px;
            text-align: center;
            color: #fff;
            font-size: 14px;
            

        }
        .damihead-right-one{
            width: 110px;
            height: 100%;
            /* border: 1px solid red; */

        }
        .damihead-right-two{
            width: 110px;
            height: 100%;
            /* border: 1px solid red; */
            

        }
        /* 导航栏 */
        .daminav{
            width: 1200px;
            height: 80px;
            /* border: 1px solid red; */
            display: flex;
            align-items: center;
            margin-left: 150px;


        }
        .daminav-left{
            width: 50px;
            height: 50px;
            /* border: 1px solid red; */
            


        }
        .daminav-right{
            height: 100%;
            flex: 1;
            /* border: 1px solid red; */
            font-size: 12px;
            display: flex;
            align-items: center;
            justify-content: space-between;
            margin-left: 300px;
           

        }
        .daminav-right-one{
            width: 550px;
        }
        .daminav-right-one ul{
            display: flex;
            align-items: center;
            
        }
        .daminav-right-one ul li{
            margin-left: 10px;
        }
        .daminav-right-two{
            height: 100%;
            flex: 1;
            /* border: 1px solid red; */
            display: flex;
            align-items: center;

        }
        .daminav-right-two-input{
            width: 200px;
            height: 40px;
            border: 1px solid #999;

        }
        .daminav-right-two-go{
            width: 40px;
            height: 40px;
            border: 1px solid #999;

        }

        /* 轮播图 */
        .damilunbotu{
            width: 1200px;
            height: 500px;
            display: flex;
            margin-left: 150px;
            
        }
        .damilunbotu-one{
            width: 250px;
            height: 100%;
            background-color: #2e0c00;
            color: #fff;
            font-size: 14px;
           
        }
        .damilunbotu-one ul{
            height: 100%;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            padding: 50px 20px;
            box-sizing: border-box;

        }
        .damilunbotu-one ul li{
            width: 100%;
            display: flex;
            justify-content: space-between;

        }


        .damilunbotu-two{
            height: 100%;
            flex: 1;
        }
        .damilunbotu-two img{
            width: 100%;
            height: 100%;
        }
      

/* 大米家庭 */
        .damijiating{
            width: 1200px;
            height: 180px;
            display: flex;
            margin: 30px 0 30px 150px;
            /* border: 1px solid red; */
        }
        .damijiating-left{
            width: 250px;
            height: 100%;
            background-color: #605750;

        }
        .damijiating-left ul{
            width: 100%;
            height: 100%;
            font-size: 12px;
            color: #fff;
            display: flex;
            flex-wrap: wrap;
            align-items: center;

        }
        .damijiating-left ul li{
            width: 70px;
            height: 70px;
            border: 1px solid red;
            display: flex;
            flex-direction: column;
            justify-content: space-between;
            align-items: center;
            padding-top: 10px;
            box-sizing: border-box;
        }


        .damijiating-right{
            height: 100%;
            flex: 1;
          
            
        }
        .damijiating-right ul{
            height: 100%;
            width: 100%;
            display: flex;
            justify-content: flex-end;
        }
        .damijiating-right ul li{
            width: 300px;
            height: 100%;
            margin-left: 20px;

        }
        .damijiating-right ul li img{
            width: 100%;
            height: 100%;

        }
        /* 大米明星单品 */
        .damimingxingdanpin{
            width: 1200px;
            height: 350px;
            display: flex;
            flex-direction: column;
            margin-left: 150px;


        }
        .damimingxingdanpin-head,.damiyingjian-head{
            width: 100%;
            height: 40px;
            font-size: 16px;
        }
        .damimingxingdanpin ul{
            height: 100%;
            flex: 1;
            display: flex;
            justify-content: space-between;

        }
        .damimingxingdanpin ul li{
            width: 230px;
            height: 100%;
            border-top: 1px solid #fd8631;
            background-color: #fafafa;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .damimingxingdanpin ul li img{
            width: 80px;
            height: 80px;
        }
        .damimingxingdanpin ul li p{
            margin-top: 20px;
            font-size: 14px;
        }
        .damimingxingdanpin ul li p:last-of-type{
            color: #9999;
        }

        /* 智能硬件 */
        .damiyingjian{
            width: 1200px;
            height: 700px;
            background-color: #f5f5f5;
            display: flex;
            flex-direction: column;
            padding:   20px 20px 80px 20px;
            box-sizing: border-box;
            margin: 0 0 20px 150px;
        }
        .damiyingjian-bottom{
            width: 100%;
            flex: 1;
            margin-top: 5px;
            /* border: 1px solid red; */
            display: flex;
            


        }
        .damiyingjian-bottom-left {
            width: 230px;
            height: 100%;
            /* border: 1px solid red; */

        }
        .damiyingjian-bottom-left img{
            width: 100%;
            height: 100%;

        }
        .damiyingjian-bottom-right{
            height: 100%;
            flex: 1;
            /* border: 1px solid black; */

        }
        .damiyingjian-bottom-right ul{
            width: 100%;
            height: 100%;
            display: flex;
            justify-content: flex-end;

            
        }
        .damiyingjian-bottom-right ul li{
            width: 220px;
            height: 100%;
            margin-left: 10px;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

        }
        .damiyingjian-bottom-right ul li p{
            margin-top: 10px;

        }

        .damiyingjian-bottom-right-ul-li-top,.damiyingjian-bottom-right-ul-li-btm{
            width: 100%;
            height: 300px;
            /* border: 1px solid #9999; */
            background-color: #fff;
            display: flex;
            flex-direction: column;
            align-items: center;
            padding: 50px 10px;
            box-sizing: border-box;

        }
        .damiyingjian-bottom-right-ul-li-top p:nth-of-type(2),.damiyingjian-bottom-right-ul-li-btm p:nth-of-type(2){
            font-size: 12px;
            color:#9999;
        }
        .damiyingjian-bottom-right-ul-li-top p:nth-of-type(3),.damiyingjian-bottom-right-ul-li-btm p:nth-of-type(3){
            font-size: 14px;
            color:#fd8631;
            margin-top: 10px;
        }
        .damiyingjian-bottom-right-ul-li-top img,.damiyingjian-bottom-right-ul-li-btm img{
           width: 100px;
           height: 100px;
        }


        /* 维修 */
        .damiweixiu{
            width: 1200px;
            height: 40px;
            margin: 20px 0 20px 150px;
            /* border-bottom: 1px solid grey; */
            color: #999;
            font-size: 12px;
            /* border: 1px solid red; */
            padding: 0 100px;
            box-sizing: border-box;


        }
        .damiweixiu ul{
            width: 100%;
            height: 100%;
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 0 50px;
            box-sizing: border-box;
            border-bottom: 1px solid #9999;


        }
        .damiweixiu ul li{
            width: 150px;
            /* border: 1px solid red; */
           
            
        }
        .damiweixiu ul li span {
            margin-left: 20px;
        }

    /* 底部 */
    .damidibu{
        width: 1200px;
        height: 200px;
        display: flex;
        margin: 0 0 50px 150px;
    }
    .damidibu-left{
        height: 100%;
        flex: 1;
        /* border: 1px solid red; */
        display: flex;
        flex-direction: column;
        


    }
    .damidibu-left ul{
        width: 100%;
        flex: 1;
        display: flex;
        justify-content: center;
        padding-top: 20px;
        box-sizing: border-box;

        
    }
    .damidibu-left ul li{
        width: 180px;
        /* border: 1px solid red; */


    }
    .damidibu-left ul li .bz{
        height: 100%;
        display: flex;
        flex-direction: column;
        justify-content: space-around;

        
    }
    .damidibu-left ul li .bz h5{
        font-size: 14px;
        font-weight: 500;
        /* margin-bottom: 10px; */

    }
    .damidibu-left ul li .bz li{
        width: 100%;
        font-size: 12px;
        color: #999;
        margin-top: 8px;
        
    }


    .damidibu-left-bottom{
        width: 100%;
        height: 40px;
        /* border: 1px solid red; */
        display: flex;
        /* justify-content: center; */

    }
    .damidibu-left-bottom-left{
        width: 30px;
        height: 30px;
        /* border: 1px solid red; */
        background-color: #fd8631;
        margin-top: 5px;
       

    }
    .damidibu-left-bottom-left img{
        width: 100%;
        height: 100%;
    }


    .damidibu-left-bottom-right{
        height: 100%;
        font-size: 10px;
        color:#999;


    }
    .damidibu-left-bottom-right ul{
        width: 100%;
        display: flex;
      
    }
    .damidibu-left-bottom-right ul li{
        width: 40px;
        height: 100%;
    }
    .damidibu-left-bottom-right ul li span{
        font-weight: 1000;
        color: black;
    }


    


    



    .damidibu-right{
        width: 200px;
        height: 200px;
        border: 1px solid #fd8631;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;


    }
    .damidibu-right h5{
        font-size: 14px;
        color:#fd8631 ;
        margin-bottom: 5px;
    }
    .damidibu-right p{
        font-size: 12px;
    }
    .damidibu-right .kefu{
        width: 100px;
        height: 20px;
        color: #fd8631;
        border-left: 1px solid #9999;
        font-size: 12px;
        margin-top: 5px;
    }





        
        









        

    </style>
</head>
<body>
    <div class="dami">
        <div class="damihead">
            <div class="damihead-left">
                <ul>
                    <li>大米网 </li><span>|</span>
                    <li>大米网 </li><span>|</span>
                    <li>大米网  </li><span>|</span>
                    <li>大米网  </li><span>|</span>
                    <li>大米网  </li><span>|</span>
                    <li>大米网  </li><span>|</span>
                    <li>大米网  </li><span>|</span>
                    <li>大米网  </li><span>|</span>
                    <li>大米网 </li>
                    
                </ul>
            </div>
            <div class="damihead-right">
                <div class="damihead-right-one">
                    登录|注册
                </div>
                <div class="damihead-right-two">
                    购物车（0）
                </div>
            </div>
        </div>
        <div class="daminav">
            <div class="daminav-left">
                <img src="./HTML阶段测试/学生用资源/image/xiaomi_logo.png" alt="">
            </div>
            
            <div class="daminav-right">
                <div class="daminav-right-one">
                    <ul>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                        <li>大米手机</li>
                    </ul>
                </div>
                <div class="daminav-right-two">
                    <div class="daminav-right-two-input"></div>
                    <div class="daminav-right-two-go"></div>
                </div>
            </div>
        </div>
        <div class="damilunbotu">
            <div class="damilunbotu-one">
                <ul>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                    <li>手机 平板<span>&gt;</span></li>
                </ul>
            </div>
            <div class="damilunbotu-two">
                <img src="./HTML阶段测试/学生用资源/image/T1vWdTBKDv1RXrhCrK.jpg" alt="">
            </div>
        </div>
        <div class="damijiating">
            <div class="damijiating-left">
                <ul>
                    <li>
                        <p>START</p>
                        <P>开放购买</P>
                    </li>
                    <li>
                        <p>START</p>
                        <P>开放购买</P>
                    </li>
                    <li>
                        <p>START</p>
                        <P>开放购买</P>
                    </li>
                    <li>
                        <p>START</p>
                        <P>开放购买</P>
                    </li>
                    <li>
                        <p>START</p>
                        <P>开放购买</P>
                    </li>
                    <li>
                        <p>START</p>
                        <P>开放购买</P>
                    </li>
                </ul>
            </div>
            <div class="damijiating-right">
                <ul>
                    <li>
                        <img src="./HTML阶段测试/学生用资源/image/T184E_BQWT1RXrhCrK.jpg" alt="">
                    </li>
                    <li>
                        <img src="./HTML阶段测试/学生用资源/image/T1yvd_BQDT1RXrhCrK.jpg" alt="">
                    </li>
                    <li>
                        <img src="./HTML阶段测试/学生用资源/image/T1mahQBmKT1RXrhCrK.jpg" alt="">
                    </li>
                </ul>
            </div>
        </div>
        <div class="damimingxingdanpin">
            <div class="damimingxingdanpin-head">
                大米明星单品
            </div>
            <ul>
                <li>
                    <img src="./HTML阶段测试/学生用资源/image/tv48.jpg" alt="">
                    <p>大米电视2/2s 全系列</p>
                    <p>10/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="./HTML阶段测试/学生用资源/image/tv48.jpg" alt="">
                    <p>大米电视2/2s 全系列</p>
                    <p>10/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="./HTML阶段测试/学生用资源/image/tv48.jpg" alt="">
                    <p>大米电视2/2s 全系列</p>
                    <p>10/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="./HTML阶段测试/学生用资源/image/tv48.jpg" alt="">
                    <p>大米电视2/2s 全系列</p>
                    <p>10/48/49/55英寸 现货购买</p>
                </li>
                <li>
                    <img src="./HTML阶段测试/学生用资源/image/tv48.jpg" alt="">
                    <p>大米电视2/2s 全系列</p>
                    <p>10/48/49/55英寸 现货购买</p>
                </li>
                
            </ul>
        </div>
        <div class="damiyingjian">
            <div class="damiyingjian-head">智能硬件</div>
            <div class="damiyingjian-bottom">
                <div class="damiyingjian-bottom-left">
                    <img src="./HTML阶段测试/学生用资源/image/T1IhLjBC_T1RXrhCrK.jpg" alt="">
                </div>
                <div class="damiyingjian-bottom-right">
                    <ul>
                        <li>
                            <div class="damiyingjian-bottom-right-ul-li-top">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                            <div class="damiyingjian-bottom-right-ul-li-btm">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>


                            </div>
                        </li>
                        <li>
                            <div class="damiyingjian-bottom-right-ul-li-top">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                            <div class="damiyingjian-bottom-right-ul-li-btm">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                        </li>
                        <li>
                            <div class="damiyingjian-bottom-right-ul-li-top">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                            <div class="damiyingjian-bottom-right-ul-li-btm">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                        </li>
                        <li>
                            <div class="damiyingjian-bottom-right-ul-li-top">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                            <div class="damiyingjian-bottom-right-ul-li-btm">
                                <img src="./HTML阶段测试/学生用资源/image/zhinengtaozhuang.jpg" alt="">
                                <p>大米智能家庭套装</p>
                                <p>3分钟快速安装，30多种智能玩法</p>
                                <p>199元</p>

                            </div>
                        </li>
                        
                    </ul>
                </div>
            </div>
        </div>
        <div class="damiweixiu">
            <ul>
                <li>1小时快修服务<span>|</span></li> 
                <li>1小时快修服务<span>|</span></li> 
                <li>1小时快修服务<span>|</span></li> 
                <li>1小时快修服务<span>|</span></li> 
                <li>1小时快修服务</li> 

            </ul>
        </div>
        <div class="damidibu">
            <div class="damidibu-left">
                <ul>
                    <li >
                        <ul class="bz">
                            <h5>帮助中心</h5>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="bz">
                            <h5>帮助中心</h5>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="bz">
                            <h5>帮助中心</h5>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                    </li>
                    <li>
                        <ul class="bz">
                            <h5>帮助中心</h5>
                            <li>购物指南</li>
                            <li>购物指南</li>
                            <li>购物指南</li>
                        </ul>
                    </li>
                </ul>
                <div class="damidibu-left-bottom">
                    <div class="damidibu-left-bottom-left">
                        <img src="./HTML阶段测试/学生用资源/image/logo-mi.png" alt="">
                    </div>
                    <div class="damidibu-left-bottom-right">
                        <ul>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                            <li>大米网<span>|</span></li>
                        </ul>
                    </div>
                </div>
            </div>
            <div class="damidibu-right">
                <h5>400-100-5678</h5>
                <p>周一至周日8:00-18:00</p>
                <p>(仅收市话费)</p>
                <div class="kefu">24小时在线客服</div>
            </div>
        </div>
    </div>

    
</body>
</html>